/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  
  Text,
  StatusBar,
} from 'react-native';
import SafeAreaViewPlus from "../common/SafeAreaViewPlus";
import {WebView} from 'react-native-webview'
import NavigationBar from '../common/NavigationBar'
import NavigationUtil from '../navigator/NavigationUtil'
import {BackHandler} from 'react-native'  
import ViewUtil from '../util/ViewUtil'
const THEME_COLOR="#678"
export default class DetailPage extends React.Component{
  constructor(props){
    super(props)
    this.params = this.props.navigation.state.params
    const {itemModel} = this.params
    this.state={
      title:itemModel.fullName,
      url:itemModel.html_url,
       canGoBack:false
    }
  }

  componentDidMount(){
    BackHandler.addEventListener('hardwareBackPress',this.onBackPress)
  }

  componentWillUnmount(){
    BackHandler.removeEventListener('hardwareBackPress',this.onBackPress)
  }


  onBackPress=()=> {
    this.onBack();
    return true;
}

onBack() {
    if (this.state.canGoBack) {
        this.webView.goBack();
    } else {
        NavigationUtil.goBack(this.props.navigation);
    }
}
  onNavigationStateChange(e){
    this.setState({
      canGoBack:e.canGoBack,
      url:e.url
    })
  }
  render(){
    let navigationBar = 
    <NavigationBar
      title={this.state.title}
      style={{backgroundColor:THEME_COLOR}}
  
      leftButton={ViewUtil.getLeftBackButton(()=>this.onBack())}
    />
    return (
      <SafeAreaViewPlus
                // topColor={theme.themeColor}
            >
        {navigationBar}
        <WebView
          ref={webView=>this.webView=webView}
          source={{uri:this.state.url}}
          startInLoadingState = {true}
          onNavigationStateChange={e=>this.onNavigationStateChange(e)}
          
        />
      </SafeAreaViewPlus>
    )
  }
 
};

const styles = StyleSheet.create({
  container:{
    flex:1
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color:'#333',
  },
 
});


